page,body{
  background: var(--page-bg);
}
.order-list{
  .list-item{
    background:#fff;
    border-radius: 32px;
    margin-bottom: 20px;
    padding: 24px;
    .item-header{
      display: flex;
      align-items: center;
      font-size: 24px;
      color: var(--title-color);
      margin-bottom: 24px;
      image{
        width: 32px;
        height: 32px;
        border-radius: 50%;
        margin-right: 8px;
      }
      .span{
        margin-left: auto;
      }
      .active{
        color: var(--theme-color);
      }
    }

    .item-main{
      display: flex;
      position: relative;
      margin-bottom: 24px;
      border-radius: 24px;
      overflow: hidden;
      .main-img{
        width: 160px;
        height: 220px;
        border-radius: 20px;
        margin-right: 20px;
      }
      &.foods-goods{
        .box-flex{
          overflow-y: auto;
          margin-right: 170px;
        }
      }
      &.shops-goods{
        background: #f6f8fa;
        .main-info,.main-price{
          padding: 16px;
          box-sizing: border-box;
        }
        .main-img{
          width: 192px;
          height: 192px;
        }
      }
      .main-info{
        flex: 1;
        min-width: 0;
        font-size: 24px;
        color: #60686F;
        .h2{
          font-size: 28px;
          color: var(--title-color);
          font-weight: 700;
        }
        .p{
          display: flex;
          align-items: center;
          margin: 8px 0;
          .image{
            width: 28px;
            height: 28px;
            margin-right: 6px;
          }
        }
        .strong{
          color:#ff0d49;
          font-size: 28px;
        }
      }
      .main-price{
        font-size: 24px;
        color: #60686F;
        text-align: right;
        .price-p{
          color: #30383F;
          font-weight: bold;
        }
      }
      .main-image{
        width: 192px;
        height: 192px;
        border-radius: 16px;
        margin-right: 16px;
        min-width: 192px;
      }
      .main-mask{
        width: 170px;
        height: 192px;
        position: absolute;
        font-size: 24px;
        color: #60686F;
        right: 0;
        top:0;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        box-shadow: -0 0 90px 90px #fff;
        background: #fff;
        .mask-img{
          width: 24px;
          height: 24px;
          margin-left: 8px;
        }
      }
    }   ///item-main end

    .item-footer{
      display: flex;
      align-items: center;
      margin-top: 6px;
      font-size: 24px;
      color: var(--title-color);
      .button{
        border: 2px solid var(--theme-color);
        color: var(--theme-color);
        font-size: 24px;
        line-height: 60px;
        padding: 0 28px;
        margin-left: 10px;
        border-radius: 16px;
        background: #fff;
      }
      .footer-cancel{
        border-color: var(--title-color);
        color: var(--title-color);
      }
    }
  }  //   list-item end
}  ///   order-list end